<template>
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">轨道机器人信息</text></view>
				</template>
				<my-grid :list="list" :col="3" decimals="1" imgWidth="25%" />
			</u-collapse-item>

			<u-collapse-item name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">异常分析</text></view>
				</template>
				<my-grid :list="list1" :col="2"></my-grid>

				<up-subsection :list="[{ name: '异常趋势' }, { name: '异常次数' }, { name: '异常占比' }]" :current="current" mode="subsection" class="m-y-10" @change="fn1" />

				<view class="charts-box" :key="current">
					<qiun-data-charts :type="type" ontouch :opts="opts" :chartData="chartData" />
				</view>
			</u-collapse-item>

			<u-collapse-item name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">巡检任务完成分析</text></view>
				</template>

				<up-subsection :list="[{ name: '近一周' }, { name: '近30天' }]" :current="current2" mode="subsection" @change="fn2" />

				<view class="flex m-between m-t-10">
					<view class="flex">
						<view class="f-s-12 m-r-5">计划任务数</view>
						<u-count-to bold fontSize="12" color="#0052D9" :endVal="plan" />
					</view>
					<view class="flex">
						<view class="f-s-12 m-r-5">完成任务数</view>
						<u-count-to bold fontSize="12" color="#0052D9" :endVal="end" />
					</view>
				</view>

				<u-line-progress :percentage="((end / plan) * 100).toFixed(1)" height="15" activeColor="#4C82FF" />

				<view class="charts-box">
					<qiun-data-charts type="line" ontouch :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
import { getApiFabric } from '@/api/customApi';

const showMoreKeys = ref([1, 2, 3]),
	collapse = ref(null);

/*********************************************轨道机器人信息**********************************/
const list = ref([
	{
		img: 'sbxj/1.png',
		key: '今日任务总数',
		title: '今日任务总数',
		value: 0
	},
	{
		img: 'sbxj/2.png',
		key: '已执行任务总数',
		title: '已执行',
		value: 0
	},
	{
		img: 'sbxj/3.png',
		key: '待执行任务总数',
		title: '待执行',
		value: 0
	},
	{
		img: 'sbxj/4.png',
		key: '环境温度',
		title: '温度',
		value: 0
	},
	{
		img: 'sbxj/5.png',
		key: '湿度',
		title: '湿度',
		value: 0
	},
	{
		img: 'sbxj/6.png',
		key: '一氧化碳',
		title: '一氧化碳',
		value: 0
	},
	{
		img: 'sbxj/7.png',
		key: '硫化氢',
		title: '硫化氢',
		value: 0
	},
	{
		img: 'sbxj/8.png',
		key: '细颗粒物',
		title: 'PM10',
		value: 0
	},
	{
		img: 'sbxj/9.png',
		key: '超细颗粒物',
		title: 'PM2.5',
		value: 0
	},
	{
		img: 'sbxj/10.png',
		key: '烟雾',
		title: '烟雾',
		value: 0
	},
	{
		img: 'sbxj/11.png',
		key: '氧气',
		title: '氧气',
		value: 0
	},
	{
		img: 'sbxj/12.png',
		key: '甲烷',
		title: '甲烷',
		value: 0
	}
]);

function fn0() {
	getApiFabric({
		apiCode: '43ea187f-6d9b-4391-8972-9c7eab7faf5c',
		propertyMapping: {
			key: 'name',
			val: 'value'
		}
	}).then((res) => {
		const data = ArrayToObj(res.data);
		list.value.forEach((item) => {
			item.value = data[item.key];
		});
	});
}
/*********************************************异常分析**********************************/
const current = ref(0),
	list1 = ref([
		{
			title: '当日异常数',
			value: 0
		},
		{
			title: '累计异常数',
			value: 0
		}
	]),
	opts = ref({
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [10, 10, 10, 0],
		legend: {
			show: false,
			position: 'top',
			fontSize: 12
		},
		enableScroll: true,
		xAxis: {
			disableGrid: true,
			calibration: true,
			itemCount: 10,
			labelCount: 5,
			fontSize: 10
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			fontSize: 10,
			data: [
				{
					title: '个',
					min: 0
				}
			]
		},
		title: {
			name: '0',
			fontSize: 30,
			color: '#000',
			offsetY: -5
		},
		subtitle: {
			name: '异常总数',
			fontSize: 15,
			color: '#000'
		},
		extra: {
			line: {
				type: 'straight',
				width: 2,
				activeType: 'hollow'
			},
			column: {
				type: 'group',
				width: 20,
				linearType: 'custom',
				seriesGap: 5,
				linearOpacity: 0.5,
				barBorderCircle: true,
				customColor: ['#1890FF', '#EB88E2']
			},
			ring: {
				ringWidth: 20,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 10,
				border: true,
				borderWidth: 3,
				borderColor: '#FFFFFF'
			}
		}
	}),
	chartData = ref({}),
	type = ref('line'),
	typeList = {
		0: 'line',
		1: 'column',
		2: 'ring'
	},
	data = {
		0: {
			apiCode: 'ce78822f-4381-4223-afec-85d1d90621d0',
			propertyMapping: {
				x: 'name',
				y: 'value'
			}
		},
		1: {
			apiCode: 'd6e93f95-0d6c-4977-9463-1603a563d911',
			propertyMapping: {
				x: 'x',
				y: 'y'
			}
		},
		2: {
			apiCode: 'd6e93f95-0d6c-4977-9463-1603a563d911',
			propertyMapping: {
				name: 'x',
				value: 'y'
			}
		}
	};

function fn() {
	getApiFabric({
		apiCode: 'e9308ec8-52e5-449a-9309-89667aaea578',
		propertyMapping: {
			count: 'count',
			todayNum: 'todayNum'
		}
	}).then((res) => {
		list1.value[0].value = res.data[0].todayNum;
		list1.value[1].value = res.data[0].count;
	});
}

function fn1(index = 0) {
	current.value = index;
	chartData.value = {};
	getApiFabric(data[current.value]).then((res) => {
		if ([0, 1].includes(current.value)) {
			chartData.value = res.data.reduce(
				(prev, cur) => {
					prev.categories.push(current.value === 0 ? cur.x.slice(5) : cur.x);
					prev.series[0].data.push(cur.y);
					return prev;
				},
				{
					categories: [],
					series: [
						{
							data: []
						}
					]
				}
			);
		} else {
			let total = 0;
			res.data.forEach((item) => {
				item.labelText = `${item.name}:${item.value}`;
				total += item.value;
			});
			opts.value.title.name = total;
			chartData.value = {
				series: [
					{
						data: res.data
					}
				]
			};
		}
		type.value = typeList[current.value];
	});
}

/*********************************************巡检任务完成分析**********************************/
const current2 = ref(0),
	opts2 = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [10, 10, 10, 0],
		legend: {
			show: true,
			position: 'top',
			fontSize: 12
		},
		enableScroll: true,
		xAxis: {
			disableGrid: true,
			calibration: true,
			itemCount: 10,
			labelCount: 5,
			fontSize: 10
		},
		yAxis: {
			showTitle: false,
			gridType: 'dash',
			fontSize: 10,
			data: [
				{
					title: '个',
					min: 0
				}
			]
		},
		extra: {
			line: {
				type: 'straight',
				width: 2,
				activeType: 'hollow'
			}
		}
	},
	chartData2 = ref({}),
	data2 = {
		0: {
			apiCode: 'd7e733cb-7289-438e-b1c1-8afccd189a18',
			propertyMapping: {
				x: 'x',
				y: 'y',
				s: 'type'
			}
		},
		1: {
			apiCode: '5e369cfb-4f1d-4707-a5fa-8b7d39428300',
			propertyMapping: {
				x: 'x',
				y: 'y',
				s: 'type'
			}
		}
	},
	plan = ref(),
	end = ref(),
	data3 = {
		0: {
			apiCode: '1064dc02-4429-4cb2-876e-fa201310e7d0',
			propertyMapping: {
				endNum: 'endNum',
				planNum: 'planNum'
			}
		},
		1: {
			apiCode: '6bb7df12-df5f-41ef-99f1-84307acce695',
			propertyMapping: {
				endCount: 'endCount',
				planCount: 'planCount'
			}
		}
	};

function fn2(index = 0) {
	current2.value = index;
	chartData2.value = {};
	getApiFabric(data2[current2.value]).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(current2.value === 1 ? cur.x.slice(5) : cur.x)) {
					prev.categories.push(current2.value === 1 ? cur.x.slice(5) : cur.x);
				}
				if (!prev.series[cur.s]) prev.series[cur.s] = [];
				prev.series[cur.s].push(cur.y);
				return prev;
			},
			{
				categories: [],
				series: {}
			}
		);
		let series = [];
		for (let [name, data] of Object.entries(resData.series)) {
			series.push({
				name,
				data
			});
		}
		chartData2.value = {
			categories: resData.categories,
			series
		};
	});
	getApiFabric(data3[current2.value]).then((res) => {
		if (current2.value == 0) {
			plan.value = res.data[0].planNum;
			end.value = res.data[0].endNum;
		} else {
			plan.value = res.data[0].planCount;
			end.value = res.data[0].endCount;
		}
	});
}

function getServerData(refresh) {
	Promise.all([fn0(), fn(), fn1(), fn2()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
		setTimeout(() => {
			collapse.value.init();
		}, 300);
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>
